<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_2149345_z43nseru0gh.css">
    <script src="lib/jquery-3.2.1.js"></script>
</head>
<body>
    <div class="total">
        <div class="header">
            <div class="head">
                <div class="head-left" style="position: relative;">
                    <img class="yuque" src="images/语雀.png" alt="">
                    <div class="head-text">                        
                        <a href="">产品功能</a>
                        <a href="">数据安全</a>
                        <a href="">空间</a>
                        <a href="">定价</a>
                        <a href="">下载</a>
                        <a href="">发现</a>
                    </div>
                <div class="head-right">                    
                    <input class="search" type="text" placeholder="搜索">
                    <button class="btn1"><img src="images/fangdajing.png" alt=""></button>
                    <a class="log" href="">登录</a>
                    <a class="regist" href="">快速注册</a>
                </div>
            </div>
        </div>


        <div class="content">
            <div class="container">
                <div class="container-left">
                    <div class="pic1">
                        <div class="picture-head">
                        
                            <img class="picture" src="images/头像.png" alt="">
                            <div class="pic-text">
                                <div class="pic-text1">
                                    <p class="p1">chengbenchao</p>
                                    <p class="p1" style="color: #595959;">懦夫从未启程，弱者死于途中，而我们在路上。</p>
                                    <p class="focus">关注</p>
                                </div>
                            </div>
                            <div class="concen">
                                <div class="pic-left">
                                    <p style="color: #595959;">关注了</p>
                                    <p style="font-weight: bold;">8</p>
                                </div>
                                <hr>
                                <div class="pic-right">
                                    <p style="color: #595959;">关注者</p>
                                    <p style="font-weight: bold;">185</p>
                                </div>
                            </div>
                            <div class="line1"></div>
                            <div class="line2"></div>
                            
                        </div>
                        <div class="more">
                            <div class="locate">
                                <i class="iconfont icon-location"></i>
                                <span class="wuhan">武汉</span>
                            </div>
                            <div class="job">
                                <i class="iconfont icon-gongzuo"></i>
                                <span class="gongzuo">Web前端工程师</span>
                            </div>
                        </div>
                        
                        <div class="party">
                            <p class="team" style="text-align: left;">团队</p>
                            <p class="team-text">尚未加入任何团队</p>
                        </div>
                    </div>
                </div>
                <div class="container-right">
                    <table style="top: 0;right: 0;position: absolute;width: 650px;height: 300px;">
                        <tr>
                            <td style="height: 70px;">
                                <div class="detail">

                                    <a href="">知识库</a>
                                    <div class="green-line"></div>
                                    <a href="">关注了</a>
                                    <a href="">关注者</a>
                                </div>
                            </td>
                        </tr>

                        <tr>
                            <td>
                                <div class="right-search">
                                    <div class="search-hover">
                                    <input class="search2" type="text" placeholder="搜索知识库">
                                    <button class="btn2"><img src="images/fangdajing.png" alt=""></button>
                                    </div>
                                    <div class="type">
                                        <p class="all">类型：所有</p>
                                        <img class="xiabiao" src="images/下标.png" alt="">
                                    </div>
                                </div>
                            </td>
                        </tr>

                        <tr>
                            <td>
                                <div class="container-text1">
                                    <img class="book1" src="images/book.png" alt="">
                                    <div class="node">
                                        <p class=node.js>node.js</p>
                                        <p class=js>node.js框架</p>
                                        <p class="time1">今天 16:50</p>
                                    </div>
                                </div>
                            </td>
                        </tr>

                        <tr>
                            <td>
                                <div class="container-text2">                                   
                                    <img class="book2" src="images/book.png" alt="">
                                    <div class="mini">
                                        <p class="pro">小程序</p>
                                        <p class="time2">10-26 16:55</p>
                                    </div>
                                </div>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
            
        </div>


        <div class="footer">
            <div class="foot">
                <img class="footer-pic" src="images/语雀.png" alt="">
                <div class="line3"></div>
                <div class="footer-text">
                    <a href="">关于语雀</a>
                    <a href="">使用帮助</a>
                    <a href="">数据安全</a>
                    <a href="">服务协议</a>
                    <a href="">English</a>
                </div>
            </div>
        </div>
    </div>
    <div class="foot-icon"><i class="iconfont icon-cc-top"></i></div>
    <div class="wenh"><p class="mark"> ？</p></div>
    
    <script>
        // 让窗口滚动到顶部  $("html").animate({scrollTop})
        $(window).scroll(function () {
            var scrollTop = $(window).scrollTop();
            if (scrollTop > 100) {
                $(".foot-icon").show(400)
            } else {
                $(".foot-icon").hide(400)
            }
        })
       
        $(".foot-icon").click(function(){
            $("html").animate({scrollTop:0})
        })
    </script>
</body>
</html>